import React, { useEffect, useState } from 'react';
import { Button, Col, Form, Input, Layout, List, Modal, Row } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';

import Record from '../../components/RecordCard';
import { RecordType } from "../../types";

const {Content} = Layout;
const CreateRecordModal = ({visible, onCreate, onCancel}) => {
  const [form] = Form.useForm();

  const onFinish = values => {
    onCreate(values);
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      open={visible}
      title="创建记录"
      okText="创建"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => form.submit()}
    >
      <Form form={form} onFinish={onFinish}>
        <Form.Item
          name="title"
          label="标题"
          rules={[{required: false, message: '请输入标题'}]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
          name="content"
          label="内容"
          rules={[{required: false, message: '请输入内容'}]}
        >
          <Input.TextArea rows={4}/>
        </Form.Item>
        <Form.Item
          name="tags"
          label="标签"
          help="多个标签用逗号分隔"
        >
          <Input/>
        </Form.Item>
      </Form>
    </Modal>
  );
};

const Home = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 模拟记录数据
  const [records, setRecords] = useState<RecordType[]>([]);
  const handleCreate = values => {
    // 处理创建记录逻辑，可以将记录添加到 records 数组中
    // console.log('Received values:', values);
    const now = new Date();
    values["create_at"] = now.toISOString();
    values["updated_at"] = now.toISOString();
    values["user_id"]  = 1;
    values["tags"] = values["tags"].split(",");
    setRecords(records => {
      return [values, ...records];
    })
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const saveToLocal = ()=>{
    localStorage.setItem("records", JSON.stringify(records));
  }

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  useEffect(() => {
    const records = JSON.parse(localStorage.getItem("records") as string) || [];
    setRecords(records);
  }, [])


  return (
    <Content style={{padding: '24px', background: '#fff'}}>
      {/* 搜索框和创建记录按钮 */}
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Input placeholder="输入关键字进行搜索" prefix={<SearchOutlined/>}/>
        </Col>
        <Col span={6} style={{textAlign: 'right'}}>
          <Button type="primary" icon={<PlusOutlined/>} onClick={showModal}>
            创建记录
          </Button>
          <CreateRecordModal
            visible={isModalVisible}
            onCreate={handleCreate}
            onCancel={handleCancel}
          />
        </Col>
        <Col span={6}>
          <Button type="primary" danger onClick={saveToLocal}>
            保存到本地
          </Button>
        </Col>
      </Row>

      {/* 记录展示部分 */}
      <List
        itemLayout="vertical"
        dataSource={records }
        renderItem={record => (
          <List.Item key={record.record_id}>
            {/* 将 Record 组件应用到每个记录 */}
            <Record key={record.record_id} record={record}/>
          </List.Item>
        )}
      />
    </Content>
  );
};

export default Home;
